@import 'libs/normalize';
@import 'variables';

body {
  box-sizing: border-box;
}

.content {
  margin: 20px;
}

.bg_img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100vh; // Тут высота блока
  width: 100%; // Тут длина
  background: linear-gradient(
    149deg,
    rgba(24, 187, 156, 1) 0%,
    rgba(106, 57, 175, 1) 42%,
    rgba(187, 24, 148, 1) 72%,
    rgba(115, 53, 134, 1) 100%
  );
  animation: gradient 15s infinite linear; // 10s - скорость анимации
  background-size: 400%; // Можно менять и подбирать интенсивность
}

@keyframes gradient {
  0% {
    background-position: 80% 0%;
  }
  50% {
    background-position: 20% 100%;
  }
  100% {
    background-position: 80% 0%;
  }
  50% {
    background-position: 20% 100%;
  }
  0% {
    background-position: 80% 0%;
  }
}

.player-switcher {
  display: flex;
  justify-content: center;
  max-width: 246px;
  margin: 0 auto 40px;
}

.radio {
  padding: 7px 36px;
  border-radius: 20px 0 0 20px;
  background: rgba(75, 75, 75, 0.6) 0%;

  &:hover {
    cursor: pointer;
  }
}

.player {
  padding: 7px 36px;
  margin-left: 1px;

  border-radius: 0 20px 20px 0;
  background: rgba(75, 75, 75, 0.6) 0%;

  &:hover {
    cursor: pointer;
  }
}

.wrapper {
  position: relative;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;

  max-width: 326px;
  background: linear-gradient(
    180deg,
    rgba(75, 75, 75, 0.6) 0%,
    rgba(170, 170, 170, 0.6) 100%,
    rgba(75, 75, 75, 0.6) 100%
  );
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);

  border-radius: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 40px;

  width: calc(326px - 40px);
  max-height: 100vh;
  height: 100%;
}

.link_buttons {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
}

.steam-link:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.vk-link:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.discord-link:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.disabled {
  color: #858585;
}
